<template>
  <view :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }" class="all-container">
    <view class="center-person-container">
      <image class="center-person-img" :style="{ height: personParam + 'px', width: personParam + 'px' }" />
    </view>

    <!-- <text class="bottom-container-tip">激活码解锁</text> -->
    <text class="bottom-container-tip">向上滑出结果</text>

    <image class="slide-up-img" @click="changePage" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      screenHeight: 0,
      screenWidth: 0,
      personParam: 0,
    };
  },

  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenHeight = systemInfo.windowHeight;
    this.screenWidth = systemInfo.windowWidth;

    // 因为图片本身自带边距，所有要宽高要设置大一些
    this.personParam = this.screenWidth * 0.8;
  },

  methods: {
    changePage() {
      this.$emit("setCurrentPage", 1);
    },
  },
};
</script>
<style  lang="scss" scoped>
.all-container {
  width: 100%;
  height: 100%;
  background-image: url($img-base + "career/diagnosis/judge_result_first_bg.png");
  background-size: 100% 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  .center-person-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 20%;

    .center-person-img {
      width: 38%;
      height: 38%;
      background-image: url($img-base + "career/diagnosis/judge_result_first_person.png");
      background-size: 100% 100%;
      animation-name: personMove;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
  }
  .bottom-container-tip {
    color: #b0e8fa;
    position: fixed;
    // writing-mode: tb-rl;
    // -webkit-writing-mode: vertical-lr;
    // writing-mode: vertical-rl;
    text-align: center;
    white-space: normal;
    word-break: break-all;
    width: 40rpx;
    height: auto;
    font-size: 26rpx;
    position: fixed;
    bottom: 11%;
  }
  .slide-up-img {
    position: fixed;
    bottom: 5%;
    background-size: 100% 100%;
    background-image: url($img-base + "career/diagnosis/judge_result_item_down_arr.png");
    width: 50rpx;
    height: 50rpx;
  }
}

@keyframes personMove {
  0% {
    transform: translateY(0rpx);
  }
  50% {
    transform: translateY(-10rpx);
  }
  100% {
    transform: translateY(0rpx);
  }
}
</style>